<template>
    <div class="email-maintenance app-container">
        <!-- 搜索栏 -->
        <div class="filter-container">
            <el-form size="small" :inline="true" :model="searchForm" @submit.native.prevent>
                <el-form-item label="部门前缀">
                    <el-select v-model="searchForm.prefix_dept" placeholder="请选择部门前缀" clearable>
                        <el-option v-for="item in prefixOptions" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门">
                    <el-input v-model="searchForm.dept" placeholder="请输入部门" clearable></el-input>
                </el-form-item>
                <el-form-item label="DRI">
                    <el-input v-model="searchForm.dri" placeholder="请输入DRI" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="handleSearch" class="button" plain>搜索</el-button>
                    <el-button type="info" size="mini" @click="resetSearch" class="button" plain>重置</el-button>
                </el-form-item>
                <el-row :gutter="8" class="mb8">
                    <el-col :span="0.5">
                        <el-button type="success" size="mini" @click="handleAdd()" class="button"
                            v-hasPermi="['Email_add']">新增</el-button>
                    </el-col>
                </el-row>

                <!-- 表格 -->
                <el-table :data="tableData" border v-loading="loading" :max-height="THeight">
                    <el-table-column label="序号" align="center" width="80">
                        <template slot-scope="scope">
                            {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="Prefix_dept" label="部门前缀" align="center"></el-table-column>
                    <el-table-column prop="Dept" label="部门" align="center"></el-table-column>
                    <el-table-column prop="DRI" label="DRI" align="center"></el-table-column>
                    <el-table-column prop="Email" label="邮箱" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleEdit(scope.row)"
                                v-hasPermi="['Email_update']">编辑</el-button>
                            <el-button type="text" @click="handleDelete(scope.row, scope.$index)"
                                v-hasPermi="['Email_delete']">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </div>

        <!-- 分页器 -->
        <div class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pagination.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
        </div>

        <!-- 新增/编辑对话框 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" @close="resetForm"
            :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="form" :rules="rules" ref="emailForm" label-width="100px">
                <el-form-item label="部门前缀" prop="Prefix_dept">
                    <el-select v-model="form.Prefix_dept" placeholder="请选择部门前缀" style="width: 100%">
                        <el-option v-for="item in prefixOptions" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门" prop="Dept">
                    <el-input v-model="form.Dept" placeholder="请输入部门"></el-input>
                </el-form-item>
                <el-form-item label="DRI" prop="DRI">
                    <el-input v-model="form.DRI" placeholder="请输入DRI"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="Email">
                    <el-input v-model="form.Email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="info" plain size="mini" @click="dialogVisible = false">取 消</el-button>
                <el-button type="success" plain size="mini" @click="submitForm">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { reqGetEmail, reqAddEmail, reqUpdateEmail, reqDeleteEmail } from "@/api/newApi/OCAP/index.js"

    export default {
        name: 'EmailMaintenance',
        data() {
            return {
                THeight: document.documentElement.clientHeight - 220,
                // 搜索表单
                searchForm: {
                    prefix_dept: '',
                    dept: '',
                    dri: ''
                },
                // 表格数据
                tableData: [],
                // 加载状态
                loading: false,
                // 分页信息
                pagination: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
                // 对话框
                dialogVisible: false,
                dialogTitle: '新增邮件',
                // 表单数据
                form: {
                    ID: '',
                    Prefix_dept: '',
                    Dept: '',
                    DRI: '',
                    Email: ''
                },
                // 表单验证规则
                rules: {
                    Prefix_dept: [
                        { required: true, message: '请选择部门前缀', trigger: 'change' }
                    ],
                    Dept: [
                        { required: true, message: '请输入部门', trigger: 'blur' }
                    ],
                    DRI: [
                        { required: true, message: '请输入DRI', trigger: 'blur' }
                    ],
                    Email: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                    ]
                },
                // 部门前缀选项
                prefixOptions: [
                    { value: 'FACA工程师', label: 'FACA工程师' },
                    { value: 'FACA课长', label: 'FACA课长' },
                    { value: 'FACA部长', label: 'FACA部长' },
                    { value: 'QC工程师', label: 'QC工程师' },
                    { value: 'QC课长', label: 'QC课长' },
                    { value: 'QC部长', label: 'QC部长' },
                    { value: 'QA部长', label: 'QA部长' },
                    { value: 'QA本部长', label: 'QA本部长' }
                ]
            }
        },
        mounted() {
            this.getEmailList()
        },
        methods: {
            // 获取邮件列表
            async getEmailList() {
                this.loading = true
                try {
                    const data = {
                        page: this.pagination.currentPage,
                        limit: this.pagination.pageSize,
                        prefix_dept: this.searchForm.prefix_dept || '',
                        dept: this.searchForm.dept || '',
                        dri: this.searchForm.dri || ''
                    }

                    const response = await reqGetEmail(data)

                    if (response.code === 0) {
                        this.tableData = response.data
                        this.pagination.total = response.count
                    } else {
                        this.$message.error(response.msg || '获取数据失败')
                    }
                } catch (error) {
                    this.$message.error('请求失败：' + error.message)
                } finally {
                    this.loading = false
                }
            },

            // 搜索
            handleSearch() {
                this.pagination.currentPage = 1
                this.getEmailList()
            },

            // 重置搜索
            resetSearch() {
                this.searchForm = {
                    prefix_dept: '',
                    dept: '',
                    dri: ''
                }
                this.pagination.currentPage = 1
                this.getEmailList()
            },

            // 新增
            handleAdd() {
                this.dialogTitle = '新增邮件'
                this.dialogVisible = true
            },

            // 编辑
            handleEdit(row) {
                this.dialogTitle = '编辑邮件'
                this.form = { ...row }
                this.dialogVisible = true
            },

            // 删除
            handleDelete(row, index) {
                const displayIndex = (this.pagination.currentPage - 1) * this.pagination.pageSize + index + 1;
                this.$confirm(`确定要删除序号为"${displayIndex}"的记录吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    try {
                        const response = await reqDeleteEmail({ ID: row.ID })

                        if (response.success) {
                            this.$message.success(response.message)
                            this.getEmailList()
                        } else {
                            this.$message.error(response.message)
                        }
                    } catch (error) {
                        this.$message.error('删除失败：' + error.message)
                    }
                }).catch(() => {
                    // 用户取消删除
                })
            },

            // 提交表单
            submitForm() {
                this.$refs.emailForm.validate(async (valid) => {
                    if (valid) {
                        try {
                            let response
                            if (this.form.ID) {
                                // 编辑
                                response = await reqUpdateEmail(this.form)
                                if (response.code === 0) {
                                    this.$message.success(response.msg)
                                } else {
                                    this.$message.error(response.msg)
                                    return
                                }
                            } else {
                                // 新增
                                response = await reqAddEmail(this.form)
                                if (response.success) {
                                    this.$message.success(response.message)
                                } else {
                                    this.$message.error(response.message)
                                    return
                                }
                            }

                            this.dialogVisible = false
                            this.getEmailList()
                        } catch (error) {
                            this.$message.error('操作失败：' + error.message)
                        }
                    } else {
                        return false
                    }
                })
            },

            // 重置表单
            resetForm() {
                this.form = {
                    ID: '',
                    Prefix_dept: '',
                    Dept: '',
                    DRI: '',
                    Email: ''
                }
                if (this.$refs.emailForm) {
                    this.$refs.emailForm.clearValidate()
                }
            },

            // 分页大小改变
            handleSizeChange(size) {
                this.pagination.pageSize = size
                this.pagination.currentPage = 1
                this.getEmailList()
            },

            // 当前页改变
            handleCurrentChange(page) {
                this.pagination.currentPage = page
                this.getEmailList()
            }
        }
    }
</script>

<style lang="scss" scoped>
    .email-maintenance {
        padding: 20px;
    }

    .filter-container {
        margin-bottom: 20px;
    }

    .pagination-container {
        margin-top: 20px;
        text-align: right;
    }

    /* //表头颜色 */
    ::v-deep .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
        background-color: #f0f8ff !important;
    }

    /* 
//dialog */
    ::v-deep .el-dialog__body {
        padding: 0 20px 10px 20px;
    }

    ::v-deep .el-card__body {
        padding: 10px 10px 10px 10px;
    }

    ::v-deep .el-tabs__item {
        padding: 0px 45px;
    }
</style>